<template>
    <nav-bar>
        <template v-slot:default>购物车信息</template>
    </nav-bar>

    <el-row :gutter="12" >
        <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">

                <span>
                <img
                    src="../../assets/images/python.jpg"
                    class="image"
                />
            </span>
                <span class="Sbody">
                <span>Python从入门到实战</span><br>
                <span>价格：￥114</span>
                <div class="bottom">
                    <el-button type="text" class="button" @click="msg+=1">+</el-button>
                    {{msg}}
                    <el-button type="text" class="button" @click="msg-=1">-</el-button>
                </div>
            </span>
            </el-card>
        </el-col>


    </el-row>
    <div  style="position: absolute; left: 10px;bottom: 55px;"><h3>总计：{{count}}</h3></div>
    <el-button class="result" type="primary" @click="money">
        结算
    </el-button>
</template>

<style lang="scss" scoped>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Sbody{
    position: absolute;
    right: 80px;
    top: 30px;
}

.button {
    padding: 0;
    min-height: auto;
}

.result{
    position: absolute;
    bottom: 50px;
    right: 10px;
}

.image {
    width: 100px;
    display: block;
}
</style>

<script>
import {reactive,toRefs,watch} from "vue";
import NavBar from "@/components/common/navbar/NavBar";
import { ElMessage } from 'element-plus'
    export default {
        components:{
            NavBar
        },
        setup(){
            const state = reactive({
                msg:1,
                count: 114
                }
            )
            watch(()=>state.msg , ()=> {
                state.count = state.msg * 114
            })

            const money = () =>{
                ElMessage({
                    message: '付款成功',
                    type: 'success',
                })
            }
            return{
                ...toRefs(state),
                money
            }
        }
    }
</script>
